<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上行竞赛</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link rel="stylesheet" href="../lib/layui/css/autocomplete.css">

    <!--    <link rel="stylesheet" href="./lib/layui/css/layui.css">-->
    <!--    <link rel="stylesheet" href="./css/index.css">-->
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!--可以在收藏夹中显示出图标-->
    <link rel="Bookmark" type="image/png" href="../img/logo.png"/>
    <!--可以在地址栏中显示出图标-->
    <link rel="icon" type="image/png" href="../img/logo.png"/>
    <link rel="shortcut icon" type="image/png" href="../img/logo.png"/>
    <style>
        html {
            margin: 0;
            padding: 0;
            /*width: 100%;*/
            /*height: 100%;*/
            background: #f2f5fa;
            overflow: auto;
        }
        body {
            margin: 0;
            padding: 0;
            /*width: 100%;*/
            /*height: 100%;*/
            background: #f2f5fa;
            overflow: auto;
        }
        tr.entrance-sign-box-list:first-child {
            border-bottom: 1px solid #e1e6eb;
        }
        tr.entrance-sign-box-list td:first-child {
            text-align: left;
            padding-left: 20px;
            max-width: 320px;
        }
        tr.entrance-sign-box-list td {
            font-size: 22px;
            font-weight: 400;
            text-align: center;
            font-family: Microsoft Yahei,PingFang SC,Arial!important;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            /*vertical-align: center;*/
            line-height: 51px;
        }
        tr.entrance-sign-box-list.title td {
            color: #666;
            line-height: 65px;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
        }
        .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover {
            /*background-color: #ffffff;*/
            background: linear-gradient(to right, #01AAED 5px, #ffffff 5px);
            color: #01AAED !important;
        }
        .layui-nav-tree .layui-nav-bar {
            width: 5px;
            height: 0;
            background-color: #01AAED;
        }
        .layui-nav-tree .layui-nav-item a:hover {
            background-color: #ffffff;
            color: #333;;
        }
        .layui-nav {
            background-color: #f8fafe;
        }
        .layui-nav .layui-nav-item a {
            color: #333;
        }
        .layui-nav-itemed>a, .layui-nav-tree .layui-nav-title a, .layui-nav-tree .layui-nav-title a:hover {
            color: #01AAED!important;
            background: #ffffff;
        }
        .active-tag {
            background-color: #FFF7E6;
            line-height: 18px;
            padding: 4px 8px;
            font-size: 22px;
            color: #fa8c16;
            border-radius: 4px;
        }

        .inactive-tag {
            background-color: #B2B2B2;
            line-height: 18px;
            padding: 4px 8px;
            font-size: 22px;
            color: #FFFFFF;
            border-radius: 4px;
        }
        .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
            background-color: rgba(0,0,0,0);
        }

    </style>
</head>
<body>
<div id="body" style="height: 100%;width: 100%;background-color: #f2f5fa;">
    <!-- 顶部开始 -->
    <div class="container">
        <div class="logo">
            <a>上行竞赛平台</a>
        </div>

        <ul class="layui-nav right">
            <li class="layui-nav-item" id="login" style="display: none">
                <a style="color: #ffffff">登录</a>
            </li>
            <li class="layui-nav-item" id="register" style="display: none">
                <a style="color: #ffffff">注册</a>
            </li>
            <li class="layui-nav-item" id="login-user" style="display: none">
                <a id="user-name" style="color: #ffffff"></a>
            </li>
        </ul>
    </div>
    <!-- 顶部结束 -->
    <div id="title" style="background:#f2f5fa;margin-top: 10px;width: 1200px;height:116px; margin-left: auto;margin-right: auto;">
        <div id="comp-info" style="display: inline-block;background: #ffffff; overflow: hidden; width: 89%; height: 116px;float: left">
            <table style="width: 100%">
                <tr class="entrance-sign-box-list title">
                    <td></td>
                    <td>状态</td>
                    <td>举办方</td>
                    <td id="season">赛季</td>
                    <td>参赛队伍</td>
                </tr>
                <tr class="entrance-sign-box-list">
                    <td id="comp-name"></td>
                    <td><div><span id="state"></span> </div></td>
                    <td id="owner"></td>
                    <td id="time"></td>
                    <td id="team">267</td>
                </tr>
            </table>
        </div>
        <div id="enroll" style="display: inline-block; float: right;width: 116px;height: 116px;text-align: center;color: #ffffff;cursor: pointer;">
            <button class="layui-btn layui-btn-normal" style="height: 100%;width: 100%" >
                <div style="margin-top: 10px">
                    <i class="iconfont" style="color: #ffffff;font-size: 24px;">&#xe69e;</i>
                    <div style="margin-top: -5px;font-size: 16px; font-family: Microsoft Yahei,PingFang SC,Arial!important;">报名</div>
                </div>
            </button>

        </div>
    </div>
    <div style="width: 1200px;margin-left: auto;margin-right: auto;margin-top: 10px;overflow: hidden;display: flex;align-items: stretch">
        <div style="display: inline-block;float:left;height: inherit;background: #f8fafe" >
            <ul class="layui-nav layui-nav-tree" lay-filter="nav">
                <li class="layui-nav-item layui-this" id="format"><a>赛制</a></li>
                <li class="layui-nav-item" id="data"><a>赛题与数据</a></li>
                <li class="layui-nav-item" id="sort"><a>排行榜</a></li>
                <li class="layui-nav-item" id="myteam" style="display: none"><a>我的团队</a></li>
                <li class="layui-nav-item" id="upload" style="display: none"><a>提交结果</a></li>
            </ul>
        </div>
        <div style="display: inline-block;background: #ffffff;float:left;min-height: 600px;width: 1000px;" id="frame">

        </div>
    </div>
</div>
</body>
<script src="../lib/jquery.min.js"></script>
<script src="../js/const.js"></script>
<script src="../js/util.js"></script>
<script src="../lib/layui/lay/modules/autocomplete.js"></script>

<script>
    $("#frame").load("./competition_format.html");
    var layer = layui.layer;
    layui.use('element',function () {
        var element = layui.element;
        element.on('nav(nav)',function (elem) {
            switch (elem[0].text) {
                case "赛制":
                    $("#frame").load("./competition_format.html");
                    break;
                case "赛题与数据":
                    $("#frame").load("./competition_data.html");
                    break;
                case "排行榜":
                    $("#frame").load("./sort.html");
                    break;
                case "我的团队":
                    $("#frame").load("./team.html");
                    break;
                case "提交结果":
                    $("#frame").load("./upload.html");
                    break;
            }
        });
    });
    $("#enroll").click(function () {
        util.sendGET('/check_login_state',function (response) {
            if (response.status){
                $("#format").removeClass("layui-this");
                $("#data").removeClass("layui-this");
                $("#sort").removeClass("layui-this");
                $("#frame").load("./enroll.html");
            }else{
                open('用户登录','./login.html',700,500);
            }
        },function (response) {

        });

    });
    function checkLoginState() {

        util.sendGET('/check_login_state',function (response) {
            if (response.status){
                userInfo = util.getLocalStorage("user");
                console.log(userInfo);
                if(userInfo != null && typeof(userInfo) != 'undefined'){
                    $("#login").hide();
                    $("#register").hide();
                    $("#user-name").html(userInfo.userName);
                    $("#login-user").show();
                    checkEnroll(getUrlParam("competitionId"),userInfo.userId);
                }
            }else{
                util.removeLocalStorage("user");
                $("#login").show();
                $("#register").show();
                $("#user-name").html("");
                $("#login-user").hide();
                $("#comp-info").css("width","89%");
                $("#enroll").show();
                $("#myteam").hide();
                $("#upload").hide();
            }
        },function (response) {

        });
    }
    function checkEnroll(competitionId,userId) {
        var data={};
        data.competition_id = competitionId;
        data.user_id = userId;
        util.sendPOST("/check_enroll",data,function (response) {
            if (response.status){
                $("#comp-info").css("width","100%");
                $("#enroll").hide();
                $("#myteam").show();
                $("#upload").show();
            }else{
                $("#comp-info").css("width","89%");
                $("#enroll").show();
                $("#myteam").hide();
                $("#upload").hide();
            }
        },function (response) {
            
        })
    }
    var competition;
    function getCompetition(competition_id){
        var data={};
        data.competition_id=competition_id;
        util.sendPOST("/get_competition_by_id", data, function (response) {
            if(response.status){
                var item = response.data;
                competition = item;
                var comp_name = item.competitionName;
                var state_style = '';
                var state = '';
                var season = '';
                var season_time = '';
                var joins = item.joins;
                switch (item.state) {
                    case 0:
                        state_style = "inactive-tag";
                        state = "未开始";
                        season = "未开始";
                        season_time = item.startTime.split(' ')[0];
                        break;
                    case 1:
                        state_style = "active-tag";
                        state = "进行中";
                        season = "A榜";
                        season_time = item.endTimeA.split(' ')[0];
                        break;
                    case 2:
                        state_style = "active-tag";
                        state = "进行中";
                        season = "B榜";
                        season_time = item.endTimeB.split(' ')[0];
                        break;
                    case 3:
                        state_style = "inactive-tag";
                        state = "已结束";
                        season = "B榜";
                        season_time = item.endTimeB.split(' ')[0];
                        break;
                }
                var owner = item.owner;
                $("#season").html("赛季-"+season);
                $("#state").toggleClass(state_style);
                $("#state").html(state);
                $("#comp-name").html(comp_name);
                $("#owner").html(owner);
                $("#time").html(season_time);
                $("#team").html(joins);
            }else{
                layer.msg(response.error_desc,{icon:2});
            }
        }, function (response) {
            layer.msg("服务端错误",{icon:2});
        });
    }
    function getUrlParam(key) {
        var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r != null){
            return unescape(r[2])
        }
        return null;
    }
    checkLoginState();
    console.log(getUrlParam("competitionId"));
    getCompetition(getUrlParam("competitionId"));

    $("#login").click(function () {
        open('用户登录','./login.html',700,500);
    });
    $("#register").click(function () {
        open('用户注册','./register.html',700,500);
    });
    $("#user-name").click(function () {
        open('个人信息','./user_update.html',700,500);
    });
    function open(title,url,width,height) {
        var index = layer.open({
            type: 2,
            area: [width+'px', height +'px'],
            fix: false, //不固定
            maxmin: true,
            shadeClose: true,
            shade:0.4,
            title: title,
            content: url,
            end:function () {
                checkLoginState();
            }
        });
    }


</script>
</html>